<template>
  <div
    v-if="showModal"
    class="overDiv"
  >
    <div
      v-if="!showReasonModal"
      class="cancelModal"
    >
      <div class="header">
        <div class="title" />
        <div
          class="colse"
          @click="closeModal"
        >
          <img
            src="../../assets/img/close.png"
            alt=""
          >
        </div>
      </div>
      <div class="body">
        确定取消该订单吗?
      </div>
      <div class="footer">
        <div
          class="yes"
          @click="cancelOrder"
        >
          是
        </div>
        <div
          class="no"
          @click="closeModal"
        >
          否
        </div>
      </div>
    </div>
    <div
      v-if="showReasonModal"
      class="cancelModal2"
    >
      <div class="header">
        <div class="title">
          申请取消订单
        </div>
        <div
          class="colse"
          @click="closeModal"
        />
      </div>
      <div class="body">
        <el-form
          :inline="true"
          :model="formInline"
          :label-position="labelPosition"
          label-width="100px"
          class="demo-form-inline"
        >
          <el-form-item label="取消原因">
            <el-select
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                v-model="item.value"
                :label="item.label"
                style="width: 16.69rem; height: 2.44rem; border-radius: 0"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="tips">
          <div>订单取消后:</div>
          <ul>
            <li>此订单所使用的优惠券会退回（新用户券失效）</li>
            <li>此订单使用礼品卡支付的金额退回到礼品卡</li>
            <li>此订单参加满减券活动所送优惠券失效</li>
            <li>此订单获得的成长值会被扣除</li>
            <li>
              若随单成功开通超级会员,则退款金额中不包含超级会员实际开卡费,若有问题请联系客服
            </li>
          </ul>
        </div>
      </div>
      <div class="footer">
        <div
          class="yes"
          @click="cancelOrder"
        >
          提交申请
        </div>
        <div
          class="no"
          @click="closeModal"
        >
          暂不取消
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["showModal"],
  data() {
    return {
      labelPosition: "left",
      formInline: {
        reason: "",
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      showReasonModal: false,
    };
  },
  methods: {
    cancelOrder() {
      this.showReasonModal = true;
    },
    //关闭弹窗
    closeModal() {
      this.$emit("closeModal", false);
      this.showReasonModal = false;
    },
  },
};
</script>
<style lang="scss">
.overDiv {
  .cancelModal2 {
    form {
      width: 23.6rem;
      margin: 0 auto;
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .el-form-item__label {
      font-size: 1rem !important;
    }
  }
}
</style>
<style scoped lang="scss">
.overDiv {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  .cancelModal2 {
    position: absolute;
    height: 31.69rem;
    width: 39rem;
    padding: 1.25rem;
    left: 50%;
    margin-left: -16.5rem;
    top: 50%;
    margin-top: -9.5rem;
    background: rgba(255, 255, 255, 1);
    z-index: 1001;
    .header {
      padding-top: 3.25rem;
      padding-left: 3.38rem;
      .title {
        font-size: 1.13rem;
        color: #333;
      }
    }
    .body {
      display: flex;
      flex-direction: column;
      padding-top: 3.56rem;
      .tips {
        width: 26rem;
        height: 9.19rem;
        font-size: 1rem;
        margin: 2rem auto 2.69rem auto;
        padding-left: 2rem;
        > div {
          line-height: 2rem;
        }
        ul {
          li {
            list-style: disc;
            font-size: 0.88rem;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 1.38rem;
          }
        }
      }
    }
    .footer {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      text-align: center;
      line-height: 2.56rem;
      .yes {
        width: 9.5rem;
        height: 2.5rem;
        background: rgba(0, 0, 0, 1);
        color: #fff;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        margin-right: 5.69rem;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      .no {
        width: 9.5rem;
        height: 2.5rem;
        background: rgba(255, 255, 255, 1);
        color: #333;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .cancelModal {
    position: absolute;
    height: 19rem;
    width: 33.19rem;
    padding: 1.25rem;
    left: 50%;
    margin-left: -16.5rem;
    top: 50%;
    margin-top: -9.5rem;
    background: rgba(255, 255, 255, 1);
    z-index: 1001;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .titles {
        font-size: 1.13rem;
        color: #666666;
        padding: 0.4rem 0 0 0.5rem;
      }
      .colse {
        cursor: pointer;
        width: 1.88rem;
        height: 1.88rem;
        > img {
          width: 100%;
          height: 100%;
        }
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .body {
      padding: 2.5rem 0 5.44rem 0;
      text-align: center;
      font-size: 1.13rem;
      color: #333;
    }
    .footer {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      text-align: center;
      line-height: 2.56rem;
      .yes {
        width: 8.19rem;
        height: 2.56rem;
        background: rgba(0, 0, 0, 1);
        color: #fff;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        margin-right: 5.69rem;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      .no {
        width: 8.19rem;
        height: 2.56rem;
        background: rgba(255, 255, 255, 1);
        color: #333;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
